.bg-blue{background-color:$blue;}
.bg-blue-d{background-color:$blue_d;}
.bg-cyan-d{background-color:$cyan_d}
.bg-cyan{background-color: $cyan;}
.bg-green{background-color: $green;}
.bg-green-d{background-color: $green_d;}
.bg-purple{background-color: $purple;}
.bg-purple-d{background-color: $purple_d;}
.bg-black{background-color: $black;}
.bg-black-d{background-color: $black_d;}
.bg-yellow{background-color: $yellow;}
.bg-yellow-d{background-color: $yellow_d;}
.bg-orange{background-color: $orange;}
.bg-orange-d{background-color: $orange_d;}
.bg-red{background-color: $red;}
.bg-red-d{background-color: $red_d;}
.bg-white{background-color: $white;}
.bg-white-d{background-color: $white_d;}
.bg-grey{background-color: $grey;}
.bg-grey-d{background-color: $grey_d;}
.bg-pink{background-color: $pink;}
.bg-base{background-color: $base_color;}
.bg-tran{background-color: $tran;}
.bg-tp{background-color: $tp_color;}
.bg-w{background-color: #fff;}
.bg-text-b{background-color: $text_b;}
.bg-hint-b{background-color: $hint_b;}
.bg-icon-b{background-color: $icon_b;}
.bg-divider-b{background-color: $divider_b;}
.bg-text-w{background-color: $text_w;}
.bg-hint-w{background-color: $hint_w;}
.bg-icon-w{background-color: $icon_w;}
.bg-divider-w{background-color: $divider_w;}

.b-blue{border-color:$blue;}
.b-blue-d{border-color:$blue_d;}
.b-cyan-d{border-color:$cyan_d}
.b-cyan{border-color: $cyan;}
.b-green{border-color: $green;}
.b-green-d{border-color: $green_d;}
.b-purple{border-color: $purple;}
.b-purple-d{border-color: $purple_d;}
.b-black{border-color: $black;}
.b-black-d{border-color: $black_d;}
.b-yellow{border-color: $yellow;}
.b-yellow-d{border-color: $yellow_d;}
.b-orange{border-color: $orange;}
.b-orange-d{border-color: $orange_d;}
.b-red{border-color: $red;}
.b-red-d{border-color: $red_d;}
.b-white{border-color: $white;}
.b-white-d{border-color: $white_d;}
.b-grey{border-color: $grey;}
.b-grey-d{border-color: $grey_d;}
.b-pink{border-color: $pink;}
.b-base{border-color: $base_color;}
.b-tran{border-color: $tran;}
.b-tp{border-color: $tp_color;}
.b-w{border-color: $text_w}

.b-divider-b{border-color: $divider_b;}
.b-hint-b{border-color: $hint_b;}

.b-divider-w{border-color: $divider_w;}
.b-hint-w{border-color: $hint_w;}

.c-blue{color:$blue;}
.c-blue-d{color:$blue_d;}
.c-cyan-d{color:$cyan_d}
.c-cyan{color: $cyan;}
.c-green{color: $green;}
.c-green-d{color: $green_d;}
.c-purple{color: $purple;}
.c-purple-d{color: $purple_d;}
.c-black{color: $black;}
.c-black-d{color: $black_d;}
.c-yellow{color: $yellow;}
.c-yellow-d{color: $yellow_d;}
.c-orange{color: $orange;}
.c-orange-d{color: $orange_d;}
.c-red{color: $red;}
.c-red-d{color: $red_d;}
.c-white{color: $white;}
.c-white-d{color: $white_d;}
.c-grey{color: $grey;}
.c-grey-d{color: $grey_d;}
.c-pink{color: $pink;}
.c-base{color: $base_color;}
.c-tran{color: $tran;}
.c-tp{color: $tp_color;}

.c-divider-b{color:$divider_b;}//divider
.c-hint-b{color:$hint_b;}//hint disable
.c-icon-b{color:$icon_b;}//icon secondary
.c-text-b{color:$text_b;}//text

.c-divider-w{color:$divider_w;}//divider
.c-hint-w{color:$hint_w;}//hint disable
.c-icon-w{color:$icon_w;}//icon secondary
.c-text-w{color:$text_w;}//text